<template>
	<view class="warp">
		<div class="search">
			<u-search placeholder="请输入小区名称进行搜索" v-model="form.skey" :clearabled="true" @custom="search"></u-search>
			<div class="info" v-if="form.skey!==''">
				关于<span >{{form.skey}}</span>共有{{houseList.length}}个户型
			</div>
		</div>
		<div class="history" v-if="form.skey===''">
			<div class="title">
				<div class="text">历史搜索</div>
				<image @click="delRecode" style="width: 44rpx; height: 44rpx" mode="widthFix" src="/static/del.png" @error="imageError"></image>
			</div>
			<!-- 搜索历史 存storage -->
			<div class="record">
				<!-- {{recordList}} -->
				<div class="item" v-for="(item,index) in recordList" :key="item" @click="getSkey(item)">{{item}}</div>
			</div>
		</div>
		<div class="result" v-else>
			<view class="houseList"  v-if="houseList.length">
				<HouseItem class="item" :item="item" v-for="item in houseList" :key="item.id" />
			</view>
			<view style="margin-top: 120rpx;" v-else>
				<u-empty text="抱歉，没有找到相关户型" width="300rpx" textColor="#999" icon="/static/nodata1.png"></u-empty>
			</view>
		</div>
	</view>
</template>

<script>
import HouseItem from './houstItem.vue';
export default {
	components: {
		HouseItem
	},
	data() {
		return {
			houseList: [],
			form: {
				skey: ''
			},
			recordList:[],
			isInfo:false,
		};
	},
	onLoad(){
		let that = this
		uni.getStorage({
			key: 'recordList',
			success: function (res) {
				console.log(res.data);
				that.recordList = res.data
			}
		});
	},
	methods: {
		search(e) {
			if(e!==""){
				let that = this
				that.isInfo = true
				// console.log(e);
				this.form.skey = e
				this.recordList = Array.from(new Set([e,...this.recordList])) 
				this.getHouseList()
				uni.setStorage({
					key:'recordList',
					data:that.recordList
				})
			}else{
				uni.$u.toast('请输入小区名称');
			}
			
		},
		// 服务产品搜索
		getHouseList() {
			this.$api.post('/fit/search', { ...this.form }).then((res) => {
				// console.log(res)
				this.houseList = res.data;
			});
		},
		// 删除历史记录
		delRecode(){
			this.recordList =[]
			uni.removeStorage({
				key: 'recordList',
				success: function (res) {
					console.log('success');
				}
			});
		},
		getSkey(e){
			this.search(e)
		}
	}
};
</script>

<style scoped lang="scss">
	page{
		// background-color: #fff;
	}
.warp {
	// background-color: #fff;
	// padding: 30rpx 32rpx;
	.search {
		background-color: #fff;
		padding: 30rpx 32rpx;
		.info{
			background-color: #fff;
			color: #333;
			font-size: 24rpx;
			margin-top: 20rpx;
			span{
				color: #F55726;
				font-weight: bold;
				padding: 0 8rpx;
			}
		}
	}
	.history {
		background-color: #fff;
		padding: 30rpx 32rpx;
		padding-top: 72rpx;
		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #333;
			font-size: 30rpx;
			font-weight: bold;
			margin-bottom: 48rpx;
		}
		.record{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;
			.item{
				border-radius: 40rpx;
				background-color: #F8F9FA;
				font-size: 22rpx;
				color: #666;
				margin-right:24rpx ;
				margin-bottom: 28rpx;
				padding: 10rpx 32rpx;
				
			}
		}
	}
	.result {
		// margin-top: 32rpx;
		padding: 30rpx 32rpx;
		
		.houseList {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;
			// gap: 30rpx 24rpx;
			.item {
				box-sizing: border-box;
				width: calc(50% - 16rpx);
				// width: 50%;
				background-color: #fff;
				border-radius: 16rpx;
				padding: 30rpx 16rpx;
				margin-right: 30rpx;
				margin-bottom: 30rpx;
				&:nth-child(2n) {
					margin-right: 0;
				}
			}
		}
	}
}
</style>
